<template>
	<div>
		<div class="boxes" v-loading="loading">
			<div class="boxes-back"><div>线上活动</div></div>

			<div class="navs">
				<div class="nav-box" v-for="(item, index) in tableData" :key="index" @click="tabsActivity(item.id)">
					<img class="nav-icon" :src="item.filePath" alt="" />
					<div class="nav-msg">
						<div class="nav-title">{{ item.title }}</div>
						<div class="nav-time">活动时间：{{item.startTime}}-{{item.endTime}}</div>
					</div>
					<img v-if="item.isFinish == 0" class="nav-stu" src="../../../assets/img/a7.png" alt="">
					<img v-if="item.isFinish == 1" class="nav-stu" src="../../../assets/img/a8.png" alt="">
				</div>
			</div>

			<div style="display: flex;justify-content: center;margin: 20px 0;">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pagesize"
					layout="total,prev,pager,next"
					:total="pages"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { activityManage } from '../../../network/api';
export default {
	name: 'djhdStats',
	data() {
		return {
			loading:true,
			currentPage: 1, // 当前页码
			pagesize: 6, // 每页显示的行数
			pages: 0,
			tableData: []
		};
	},
	created() {},
	mounted() {
		this.getList(1);
		// 上个页面的参数 id
		// console.log(this.$route.query.id)
	},
	methods: {
		// 切换页数
		handleCurrentChange(val) {
			this.currentPage = val;
			this.getList(val);
		},
		getList(page) {
			let param = {
				userId: localStorage.getItem('userid'),
				page: page,
				limit: this.pagesize
			};
			activityManage(param).then(res => {
				// console.log(res);
				this.tableData = res.retData.records;
				this.pages = res.retData.total;
				this.loading = false
			});
			
		},
		
		// 详情
		tabsActivity(id){
			this.$router.push({ path: '/djhd/detail',query: { id: id } });
		},
	}
};
</script>
<style lang="scss" scoped>
.boxes {
	border: 1px solid #eeeeee;
	text-align: left;
	border-top: 2px solid #cc0000;
	margin: 20px 0px;
}
.boxes-back {
	border-bottom: 1px solid #eeeeee;
	padding: 10px 20px;
	color: #cb1c1d;
	font-weight: bold;
}
// 列表
.navs {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.nav-box {
	width: 31.3%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1%;
	position: relative;
}
.nav-icon {
	width: 100%;
	height: 220px;
}
.nav-msg{
	text-align: left;
	width: 100%;
	padding: 0 10px;
	border: 1px solid #EEEEEE;
}
.nav-title {
	margin: 10px 0;
	line-height: 160%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nav-time{
	width: 100%;
	font-size: 14px;
	color: #999999;
	margin-bottom: 20px;
}
.nav-stu{
	width: 120rpx;
	height: 120rpx;
	position: absolute;
	right: 0%;
	top: 0%;
}
</style>
